/**
 * Created by szhua on 2015/10/21.
 */
var user = JSON.parse(localStorage.getItem(getParameterByName("username")));
var albumIdx = getParameterByName("album");
var albs = user.albList[albumIdx];
var imgList = albs[1] instanceof Array ? albs[1] : [];
if (user) {

    var photo = new Object();
    var operation = new Object();
    var oFReader = new FileReader();
    var rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

    $(document).ready(function () {

        (function (ope) {

            ope.init = function () {

                user = JSON.parse(localStorage.getItem(getParameterByName("username")));
                albumIdx = getParameterByName("album");
                albs = user.albList[albumIdx];
                var imgList = albs[1] instanceof Array ? albs[1] : [];
            }

            ope.loadImg = function () {
                if (imgList.length == 0) {
                    return;
                }
                for (var i = 0; i < imgList.length; i++) {

                    /* var imgFile=imgList[i];
                     oFReader.readAsDataURL(imgFile);
                     oFReader.onload=function(oFREvent){

                     }*/
                    $("#photoWall").append("<img src='" + imgList[i] + "'/>").trigger("create");
                    if ($("#photoWall img")[i].width < 135) {
                        $($("#photoWall img")[i]).addClass("img_style_2");
                    } else {
                        $($("#photoWall img")[i]).addClass("img_style_1");
                    }
                }
            }

            ope.init();
            ope.loadImg();

        })(operation);
        //$("input").attr('data-role', 'none');
        //$("select").attr('data-role', 'none');
    });

    $(window).load(function () {

        (function (app) {
            app.isEmpty=true;
            app.currImg = -1;
            app.minHeight = [0];
            app.init = function () {

                if (imgList.length) {
                    app.isEmpty=false;
                    var pic = $("#photoWall img");
                    for (var i = 0; i < pic.length; i++) {
                        $(pic[i]).data("positionId", i);
                    }
                    app.setLayout();
                }
                app.registerClickEvent();
            }

            app.getMinHeightIdx = function () {
                var index = 0;
                var temp = app.minHeight[0];
                for (var i = 1; i < app.minHeight.length; i++) {
                    if (app.minHeight[i] < temp) {
                        index = i;
                        temp = app.minHeight[i];
                    }
                }
                return index;
            }
            app.setLayout = function () {
//                    var content=$("div").data("role","content");
//                    console.log(content);
                var pic = $("#photoWall img");
                var unitWidth = pic[0].offsetWidth;
                var colsNum = Math.floor(document.documentElement.clientWidth / unitWidth);
                var remainder = document.documentElement.clientWidth % unitWidth;
                $("#photoWall").css("margin-left", remainder / 2 - 5);

                for (var i = 0; i < pic.length; i++) {
                    if (i < colsNum) {
                        app.minHeight[i] = pic[i].offsetHeight;
                        $(pic[i]).css({"left": unitWidth * i - 10, "top": 0});
                        continue;
                    }
                    var minHeightIdx = app.getMinHeightIdx();
                    $(pic[i]).css({"left": unitWidth * minHeightIdx - 10, "top": app.minHeight[minHeightIdx]});
                    app.minHeight[minHeightIdx] += pic[i].offsetHeight;

                }
            }
            app.addImgToPic = function (index) {
                app.currImg = index;
                var pic = $("#pic");
                pic.empty();
                pic.removeClass("pic_style_1");
                pic.removeClass("pic_style_2");
                var image = document.createElement("img");
                image.src = imgList[index];
                if (image.width > 300) {
                    image.setAttribute("class", "bigImg1");
                    pic.addClass("pic_style_1");
                } else {
                    image.setAttribute("class", "bigImg2");
                    pic.addClass("pic_style_2");

                }
                document.getElementById("pic").appendChild(image);

                $("#selectedPic").css("display", "block");
                pic.css("display", "block");
            }
            app.registerClickEvent = function () {
                $("#photoWall img").click(function (e) {
//                        e.preventDefault();
                    var index = $("#photoWall img").index(this);
                    app.currImg = $($("#photoWall img")[index]).data("positionId");
                    app.addImgToPic(app.currImg);
                });

                $("#last").click(function () {
                    if (app.currImg != 0) {
                        app.addImgToPic(--app.currImg);
                    }
                });

                $("#next").click(function () {
                    if (app.currImg != imgList.length - 1) {
                        app.addImgToPic(++app.currImg);
                    }
                });
                $("#cancel").click(function () {
                    $("#selectedPic").css("display", "none");
                    $("#pic").css("display", "none");
                });

                $("#addPhoto").click(function () {
                    if (document.getElementById("photoPath").files.length === 0) {
                        return;
                    }
                    var imgFile = document.getElementById("photoPath").files[0];
                    if (!rFilter.test(imgFile.type)) {
                        alert("You must select a valid image file!");
                        return;
                    }
                    oFReader.onload = function (oFREvent) {
                        imgList.push(oFREvent.target.result);
                        albs[1] = imgList;
                        user.albList[albumIdx] = albs;
                        localStorage.setItem(user.name, JSON.stringify(user));
                        var image = document.createElement("img");
                        image.src = oFREvent.target.result;
                        image.setAttribute("data-positionId", imgList.indexOf(oFREvent.target.result));
                        document.getElementById("photoWall").appendChild(image);
                        if (image.width == 135 || image.width == 450) {
                            //$($("#photoWall img")[i]).addClass("img_style_2");
                            image.setAttribute("class", "img_style_1");
                        } else {
                            image.setAttribute("class", "img_style_2");
                        }
                        if (imgList.length) {

                            var pic = $("#photoWall img");
                            for (var i = 0; i < pic.length; i++) {
                                $(pic[i]).data("positionId", i);
                            }
                            app.setLayout();
                        }
                        if(app.isEmpty){
                            app.isEmpty=false;
                            $("#photoWall img").click(function (e) {
//                        e.preventDefault();
                                var index = $("#photoWall img").index(this);
                                app.currImg = $($("#photoWall img")[index]).data("positionId");
                                app.addImgToPic(app.currImg);
                            });
                        }
                    };

                    oFReader.readAsDataURL(imgFile);
                    //imgList.push(imgFile);

                });

                $("#menu").click(function () {
                    $("#main-menu").css("display", "block");
                    /*if ($("#main-menu").css("display") == "none") {

                     } else {
                     $("#main-menu").css("display", "none");
                     }*/
                })

                $("#uploadPhoto").click(function () {
                    $("#myPopup").css("display", "block");
                    /* if ($("#myPopup").css("display") == "none") {
                     } else {
                     $("#myPopup").css("display", "none");
                     }*/
                });
                $("#close").click(function () {
                    $("#myPopup").css("display", "none");
                });
                $("#content").click(function () {
                    $("#main-menu").css("display", "none");
                    //$("#myPopup").css("display","none");
                });


            }

            app.init();

        })(photo);

    });

}



